<template>
	<view>
		<view>
			<u-sticky bgColor="#fff">
				<u-tabs :list="list" lineWidth="60" lineColor="#0F53AC" :activeStyle="activeStyle" :scrollable="false"
					:inactiveStyle="inactiveStyle" :itemStyle="itemStyle" @click="tabsClick" :current="current">
				</u-tabs>
			</u-sticky>
		</view>
		<view v-if="current==0">
			<view class="help-pubuBox">
				<u-search placeholder="搜索视频名称关键字" :clearabled="true" v-model="params.keyword" @change="change"
					@search="chaxun" @custom="chaxun" actionText="搜索" height="40" shape="square" color="#2B2B2B"
					:actionStyle="actionStyle"></u-search>
			</view>
			<view class="help-list" v-for="(item,index) in videoList" :key="index">
				<view class="help-title">
					<view class="grid-title" @click="changTab(item)">
						<view class="left-title">{{item.moduleName}}（{{item.videoCourseList.length}}）</view>
						<view class="iconfont " :class="[item.tabShow?'icon-app-zhankai':'icon-app-shouqi']"
							style="color: #1962e0;"></view>
					</view>
				</view>
				<view class="help-item" v-if="!item.tabShow">
					<polyv-player width="330rpx" height="330rpx" v-for="(c,i) in item.videoCourseList"
						:vid="c.videoId" >
					</polyv-player>
				</view>
			</view>
			<view class="empty-data" v-if="videoList.length==0" style="background: #f2f2f2;">
				<u-empty mode="data" :marginTop="100" text="暂无搜索内容"></u-empty>
			</view>

		</view>
		<view v-if="current==1">
			<view class="help-pubuBox">
				<u-search placeholder="搜索问题名称关键字" :clearabled="true" v-model="params2.keyword" @change="change2"
					@search="chaxun2" @custom="chaxun2" actionText="搜索" height="40" shape="square" color="#2B2B2B"
					:actionStyle="actionStyle"></u-search>
			</view>
			<view class="common-problem" v-for="(item,index) in problemList" :key="index">
				<view class="grid-title" @click="changTab2(item)">
					<view class="left-title">{{item.moduleName}}</view>
					<view v-if="item.commonProblemList.length>2" class="iconfont "
						:class="[item.tabShow?'icon-app-zhankai':'icon-app-shouqi']" style="color: #8c8c8c;"></view>
				</view>
				<view v-if="!item.tabShow" class="info-txt" v-for="(c,i) in item.commonProblemList" :key="i"
					@click="togoDetail(c)">
					<view class="left">{{c.problemName}}</view>
					<view class="right">
						<!-- <view class="rt-name"></view> -->
						<view class="iconfont icon-app-arrow-right"></view>
					</view>
				</view>
			</view>
			<view class="empty-data" v-if="problemList.length==0" style="background: #f2f2f2;">
				<u-empty mode="data" :marginTop="100" text="暂无搜索内容"></u-empty>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: "",
				activeStyle: {
					color: '#0F53AC',
					fontWeight: 'bold',
					transform: 'scale(1.05)'
				},
				inactiveStyle: {
					color: '#8c8c8c',
					transform: 'scale(1)'
				},
				itemStyle: {
					paddingLeft: '30rpx',
					paddingRight: '30rpx',
					paddingTop: '24rpx',
					paddingBottom: '24rpx',
					height: '48rpx'
				},
				actionStyle: {
					color: '#fff',
					background: '#0F53AC',
					padding: '10rpx',
					borderRadius: '8rpx'
				},
				current: 0,
				list: [{
					name: '视频教程',
				}, {
					name: '常见问题',
				}],
				page: 1,
				tabShow: true,
				tabShow2: true,
				videoList: [],
				params: {
					pn: 1,
					ps: 5,
					terminal: 2,
					keyword: ''
				},
				params2: {
					pn: 1,
					ps: 5,
					terminal: 2,
					keyword: ''
				},
				problemList: []
			}
		},
		onLoad() {
			this.getList();
		},
		methods: {
			//分享
			shareVideo() {
				// wx.shareVideoMessage({
				// 	videoPath: '@/static/50ed58415d2006184fc2bc4f8d9692ad.mp4',
				// 	success() {

				// 	},
				// 	fail: console.error,
				// })
			},

			tabsClick(e) {
				console.log('选择', e)
				this.current = e.index;
				if (this.current == 0) {
					this.getList();
				}
				if (this.current == 1) {
					this.getBusinessPageList();
				}
			},
			change(v) {
				this.params.keyword = v;
				this.videoList = [];
				this.params.pn = 1;
				this.getList();
			},
			chaxun() {
				this.videoList = [];
				this.params.pn = 1;
				this.getList();
			},
			change2(v) {
				this.params2.keyword = v;
				this.problemList = [];
				this.params2.pn = 1;
				this.getBusinessPageList();
			},
			chaxun2() {
				this.problemList = [];
				this.params2.pn = 1;
				this.getBusinessPageList();
			},
			changTab(item) {
				item.tabShow = !item.tabShow;
			},
			changTab2(item) {
				if (item.commonProblemList.length > 2) {
					item.tabShow = !item.tabShow;
				}
			},
			getList() {
				uni.$u.http.post(`/system/mobile/sysVideoCourse/pageList`, this.params).then(res => {
					console.log('res===>', res)
					if (res.code == 0) {
						if (res.data.length > 0) {
							res.data.forEach(item => {
								item.tabShow = false
							})
						}
						this.videoList = JSON.parse(JSON.stringify(res.data));
					}
				}).catch(err => {})
			},
			getBusinessPageList() {
				uni.$u.http.post(`/system/mobile/sysCommonProblem/businessPageList`, this.params2).then(res => {
					console.log('res===>', res)
					if (res.code == 0) {
						if (res.data.length > 0) {
							res.data.forEach(item => {
								item.tabShow = false
							})
						}
						this.problemList = JSON.parse(JSON.stringify(res.data));
					}
				}).catch(err => {})
			},
			togoDetail(item) {
				uni.navigateTo({
					url: '/pages/subPackagesD/mycenter/problemDetail?id=' + item.id
				})
			}

		}
	}
</script>

<style lang="scss">
	page {
		background: #ffffff;
	}

	.help-pubuBox {
		padding: 22rpx;
		background: #fff;
	}

	.help-list {
		padding: 20rpx;
		margin-top: 10rpx;
		background: #fff;

		.help-title {
			.grid-title {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.left-title {
					font-size: 34rpx;
					font-weight: 600;
					letter-spacing: 0px;
					line-height: 0px;
					color: #000000;
				}
			}
		}

		.help-item {
			margin: 30rpx 0 10rpx 0;
			width: 100%;
			display: flex;
			flex-wrap: wrap;

			.caozuo-item {
				width: 45%;
				display: flex;
				align-items: center;
				flex-direction: column;
				margin: 15rpx;

				.bg-icon {
					width: 332rpx;
					height: 333rpx;
					// background: url('https://img.js.design/assets/smartFill/img418164da758808.jpg');
					background-size: 100% 100%;
					border-radius: 8rpx;

					.gn-caozuo {
						color: #fff;
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 0 20rpx;
						position: relative;
						top: 270rpx;

						.left {
							display: flex;
							font-size: 24rpx;
						}

						.right {
							font-size: 40rpx;
						}
					}
				}

				.bottom-txt {
					font-size: 28rpx;
					color: #000000;
					margin-top: 20rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}
		}
	}

	.common-problem {
		background: #fff;
		margin-top: 10rpx;

		.grid-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1px solid #f2f2f2;

			.left-title {
				font-size: 34rpx;
				color: #000000;
				font-weight: 600;

			}
		}

		.info-txt {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1px solid #f2f2f2;
			background: #ffffff;

			.left {
				font-size: 34rpx;
				color: #000000;
			}

			.right {
				display: flex;
				align-items: center;
				font-size: 34rpx;
				color: #8c8c8c;

				.rt-name {
					color: #000000;
				}
			}
		}
	}
</style>